<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-04-18 18:37:23
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-07-16 12:33:06
 * @FilePath: \itforce-hris\src\pages\organization\components\unit-modal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-modal v-model:open="open" :title="$t('单元')" :maskClosable="false">
      <a-form layout="vertical" :model="formState" ref="formRef" style="margin-top: 24px;">
        <a-row :gutter="[16, 0]">
          <a-col :span="24">
            <a-form-item :label="$t('上级单元')">
              <a-input v-if="!isIfTree" v-model:value="companyObj.name" disabled />
              <template v-else>
                <a-input v-model:value="formState.parentName" disabled />
              </template>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('英文名称')" prop="nameEn" :rules="[{ required: true, message: $t('请输入') }]">
              <a-input v-model:value="formState.nameEn" maxlength="80" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('英文缩写')" prop="shortNameEn" :rules="[{ required: true, message: $t('请输入') }]">
              <a-input v-model:value="formState.shortNameEn" maxlength="20" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('中文名称')">
              <a-input v-model:value="formState.nameZh" maxlength="80" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('中文缩写')">
              <a-input v-model:value="formState.shortNameZh" maxlength="20" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('阿拉伯名称')">
              <a-input v-model:value="formState.nameAr" maxlength="80" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('阿拉伯缩写')">
              <a-input v-model:value="formState.shortNameAr" maxlength="20" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label="$t('领导')">
              <a-select
                v-model:value="formState.leaderName"
                mode="multiple"
                show-search
                style="width: 100%"
                :token-separators="[',']"
                :placeholder="$t('请选择')"
                :options="lineManagerOptions"
                :filter-option="filterOption"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                :fieldNames="{
                  label: 'fullName',
                  value: 'id'
                }" @change="lineManagerChange($event, 'leader')"></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label="$t('单元描述')" prop="description">
              <a-textarea v-model:value="formState.description" allow-clear maxlength="400" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label="$t('单元类型')" prop="unitTypeId" :rules="[{ required: true, message: $t('请选择') }]">
              <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" ref="select"
                v-model:value="formState.unitTypeId" :placeholder="$t('请选择')">
                <a-select-option v-for="(item, index) in unitList" :value="item.id">
                  {{ isCn ? item.nameZh : isArabic ? item.nameAr : item.nameEn }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <a-button @click="handleColse" :loading="loading">{{ $t('关闭') }}</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">{{ $t('保存') }}</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, defineProps, getCurrentInstance } from 'vue'
import { Modal, message } from 'ant-design-vue';
import {
  GetBusinessUnitTree,
  GetEnterpriseUnitType,
  PostBusinessUnitAdd,
  GetParentBuName,
  GetEmployee
} from "@/api/organization/index";
import { useI18n } from 'vue-i18n';
const { t: $t } = useI18n();
const { proxy } = getCurrentInstance() as any;
import { useLanguage } from "@/hooks/index";
const { isEn, isCn, isArabic } = useLanguage();
const emits = defineEmits(['addUnitModal'])
const props = defineProps({
  isIfTree: { type: Boolean, default: false }
});
const loading = ref(false);
const companyId = ref('')
const formState = ref({
  parentId: 0,
  parentName: '',
  nameEn: '',
  shortNameEn: '',
  nameZh: '',
  shortNameZh: '',
  nameAr: '',
  shortNameAr: '',
  description: '',
  leader: '',
  unitTypeId: undefined
});
const lineManagerChange = (v: any, name: string | number) => {
  formState.value[name] = JSON.stringify(v)
}
const filterOption = (input: string, option: any) => {
  return option.fullName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const lineManagerOptions = ref([])
const getEmployeeList = (id: any) => {
  GetEmployee({
    enterpriseId: id || companyId.value
  }).then(res => {
    if (res.code !== 200) return
    lineManagerOptions.value = res.data
  })
}
const open = ref(false);

const companyObj = ref(null)
const showModal = (id: string, Obj: { enterpriseId: any; }) => {
  console.log('dddd', Obj);

  companyObj.value = cloneDeep(Obj)
  // formState.value.parentId = Obj.parentId
  open.value = true
  companyId.value = id
  getTree(id)
  getUnitList(id)
  getEmployeeList(id) // 查公司lead
  if (props.isIfTree) getName()
}
const treeData = ref([])
const getTree = (id: any) => {
  GetBusinessUnitTree({
    enterpriseId: id,
    includeEnterprise: true
  }).then(res => {
    treeData.value = res.data
  })
}
const unitList = ref([])
const getUnitList = (id: any) => {
  GetEnterpriseUnitType({
    enterpriseId: id || companyId.value
  }).then(res => {
    unitList.value = res.data
  })
}
// 根据uuid查询父级bu名称
const getName = () => {
  GetParentBuName(companyObj.value.uuid).then(res => {
    formState.value.parentName = isCn.value ? res.data.nameZh : isArabic.value ? res.data.nameAr : res.data.nameEn;
    formState.value.parentId = res.data.id
  })
}
const handleColse = () => {
  open.value = false
  formRef.value.resetFields();
  formState.value = {};
}
const formRef = ref(null);
const handleOk = () => {
  if (props.isIfTree === false) formState.value.parentId = 0
  loading.value = true
  formRef.value.validate().then(() => {
    PostBusinessUnitAdd({
      ...formState.value,
      enterpriseId: companyObj.value.enterpriseId || companyObj.value.id
    }).then(res => {
      loading.value = false
      message.success($t('操作成功'));
      handleColse()
      emits('addUnitModal')
    }).finally(() => {
      loading.value = false
    });
  }).catch((error: any) => {
    loading.value = false
    // consoleerror('验证失败:', error);
  });
}
defineExpose({
  showModal
});
</script>
<style lang="scss" scoped>
.ant-btn {
  font-size: 12px;
}

::v-deep {
  .ant-form-item .ant-form-item-label>label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
    content: none;
  }
}
</style>
